<template>
  <div id="app">
    <keep-alive v-if="isLoggedIn">
      <router-view v-if="$route.meta.keepAlive" />
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive || !isLoggedIn" />
  </div>
</template>
<script>
import { getToken } from "@/utils/auth";
export default {
  data() {
    return {
      isLoggedIn: false,
      screenWidth: "",
      timer: false,
      startWidth:
        document.documentElement.clientWidth || document.body.clientWidth,
      tipFlag: false,
    };
  },
  created() {
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth;
        this.screenWidth = window.screenWidth;
      })();
    };
  },
  mounted() {
    if (window.performance.navigation.type == 1) {
      console.log("页面被刷新");
      this.tipFlag = false;
    } else {
      console.log("首次被加载");
      this.tipFlag = true;
      console.log("屏幕尺寸", this.startWidth, this.tipFlag);
      if (this.startWidth > 1024) {
        this.$dialog
          .confirm({
            className: "webTip-dialog",
            title: "温馨提示",
            message: "根据您的设备尺寸，建议您前往web端体验更佳",
            confirmButtonText: "立即前往",
            cancelButtonText: "不用了",
          })
          .then(() => {
            window.location.href = process.env.VUE_APP_BASE_YMW;
          })
          .catch(() => {
            this.tipFlag = false;
            this.timer = true;
          });
      }
    }
  },
  watch: {
    screenWidth(val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      if (!this.timer) {
        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
        this.screenWidth = val;
        this.timer = true;
        let that = this;
        setTimeout(function () {
          // 打印screenWidth变化的值
          console.log("screenWidth", that.screenWidth);
          console.log("timer", that.timer);
          console.log("tipFlag", that.tipFlag);
          if (that.screenWidth <= 1024) {
            that.$dialog.close();
            that.timer = false;
          } else if (that.tipFlag && that.screenWidth > 1024) {
            console.log("走这里了吗", this.tipFlag);
            that.$dialog
              .confirm({
                className: "webTip-dialog",
                title: "温馨提示",
                message: "根据您的设备尺寸，建议您前往web端体验更佳",
                confirmButtonText: "立即前往",
                cancelButtonText: "不用了",
              })
              .then(() => {
                window.location.href = process.env.VUE_APP_BASE_YMW;
              })
              .catch(() => {
                // on cancel
                that.tipFlag = false;
                that.timer = true;
              });
          }
          that.timer = false;
        }, 400);
      }
    },
    $route(to, from) {
      console.log(to.name);
      // if (form.name == "login") {
      //   window.location.reload();
      // }

      // if the route changes...
      let token = getToken() || "";
      if (token && this.$route.name != "login") {
        // firebase returns null if user logged out
        this.isLoggedIn = true;
      } else {
        this.isLoggedIn = false;
      }
    },
  },
};
</script>
<style lang='scss'>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.van-dialog {
  .van-dialog__footer {
    .van-button {
      .van-button__content {
        .van-button__text {
          color: #fe6018;
          font-weight: 300;
        }
      }
    }
  }
  &.webTip-dialog {
    width: 350px;
  }
}
</style>
